<template>
  <!-- 新增/编辑部门 -->
  <el-dialog :title="dialogTitle" v-model="deptParams.visible" @open="handleOpen" width="500"
    :close-on-click-modal="false">
    <div class="dept-main" v-loading="loading">
      <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="90">
        <el-form-item label="上级部门" prop="pid">
          <el-tree-select v-model="formData.pid" :data="deptParams.deptOptions" check-strictly
            :render-after-expand="false" :props="defaultProps" clearable placeholder="请选择上级部门" />
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model.trim="formData.deptName" maxlength="60" clearable placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio v-for="(value, key, index) in STATUS_TYPE" :value="Number(key)" :key="index">{{ value }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" controls-position="right" :min="0" :max="99" />
        </el-form-item> -->
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('close')">返回</el-button>
        <el-button type="primary" :disabled="loading" @click="handleSubmit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { addDept, editDept } from '@views/deptManage/api/deptManage'
import { STATUS_TYPE } from '@constants/dictionary'
const props = defineProps({
  deptParams: {
    type: Object,
    default: () => { },
    required: true
  }
})
const emit = defineEmits(['close'])
const formData = reactive({ status: 1 })
const ruleFormRef = ref(null)
const loading = ref(false)
const defaultProps = { label: 'deptName', value: 'deptId' }
const dialogTitle = computed(() => ['rootAdd', 'add'].includes(props.deptParams.type) ? '新增部门' : '编辑部门')
const rules = reactive({
  pid: [{ required: true, message: '请选择上级部门', trigger: 'change' }],
  deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
  // sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})

const handleSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      handleSave()
    } else {
      return false
    }
  })
}

const handleSave = async () => {
  loading.value = true
  const res = formData.deptId ? await editDept(formData) : await addDept(formData)
  loading.value = false
  if (res?.code === 200) {
    ElMessage.success('保存成功')
    emit('close', true)
  }
}
// 初始化弹窗
const handleOpen = () => {
  nextTick(() => {
    ruleFormRef.value.resetFields()

    let type = props.deptParams.type
    let row = props.deptParams.row
    if (['rootAdd'].includes(type)) {
      formData.deptId = ''
      return
    }
    if (['add'].includes(type)) {
      formData.deptId = ''
      formData.pid = row.deptId
      return
    }
    if (['edit'].includes(type)) {
      formData.deptId = row.deptId
      formData.pid = row.pid
      formData.deptName = row.deptName
      formData.status = row.status
      // formData.sort = row.sort
      return
    }
    console.log('初始化')
  })
}

</script>

<style lang="scss" scoped></style>
